<!DOCTYPE html>
<!-- saved from url=(0037)http://5a8fa9a355aa9.t73.qifeiye.com/ -->
<html class="bit-html mobile-false js_active  vc_mobile  vc_transform  vc_transform  iphorm-js csstransforms csstransforms3d csstransitions no-touch"
      dir="ltr" lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>信息录入</title>
    <script src="/js/jquery.min.js"></script>
    <script src="/js/index.js"></script>
    <script src="/js/vue.js"></script>
    <script src="/js/vue-resource1.5.1"></script>
    <link type="text/css" rel="stylesheet" href="style/style.css">
    <script>
        // $(document).ready(function () {
        //     $(".erweima").hide();
        //     $(".dakai").click(function () {
        //         $(".erweima").show();
        //     })
        //     $(".guanbi").click(function () {
        //         $(".erweima").hide();
        //     })
        //
        //     $(".admin-more").hide();
        //     $(".xiala").click(function () {
        //         $(".admin-more").slideToggle();
        //     })
        // });
    </script>
    <style>
        .mengceng table{ width: 100%; height: 100%; border-collapse:collapse; font-size: 12px; font-family: 微软雅黑;overflow-y: scroll;}
        .mengceng table tr td{ border:1px solid #EDEDED; height: 40px; line-height: 40px; padding: 0 6px;}
        .mengceng table tr td:nth-child(2n+1){ width:18%; text-align: center; background-color: #F9F9F9;}
        .mengceng table tr td:nth-child(2n){ width:32%;}

        .edit table{ width: 100%; height: auto; overflow: hidden; border-collapse:collapse; font-size: 12px; font-family: 微软雅黑;overflow-y: scroll;padding-bottom: 20px}
        .edit table tr td{ border:1px solid #EDEDED; height: 40px; line-height: 40px; padding: 0 6px;}
        .edit table tr td:nth-child(2n+1){ width:18%; text-align: center; background-color: #F9F9F9;}
        .edit table tr td:nth-child(2n){ width:32%;}
        .edit table tr td input{ width: 100%; height: 100%; border: none; font-family: 微软雅黑;}
        .edit .add-button{ width: 100%; text-align: center;}
        .edit .add-button button{ width:80px; height: 40px; line-height: 40px; color: #FFFFFF; background-color: #1389D3; border: none; text-align: center; border-radius: 4px; font-family: 微软雅黑;}

    </style>

</head>
<body>
<div id="app">
    <!--头部-->
    <header>
        <div class="logo fleft"><img src="images/logo.png"/> 中移入职管理系统</div>
        <div class="nav fleft ulli">
            <ul>
                <li><a href="index.html">首页</a></li>
                <li><a href="report.html">资料报到</a></li>
                <li><a href="input.html" style="background-color:#2294DC;">信息录入</a></li>
                <li><a href="articles.html">办公用品</a></li>
                <li><a href="site.html">办公站点</a></li>
                <li><a href="software.html">软件支持</a></li>
                <li><a href="password.html">系统设置</a></li>
                <li><a href="JavaScript:" class="dakai">二维码</a></li>
            </ul>
        </div>
        <div class="search fleft"><input class="search-keyword" placeholder="搜索"></div>
        <div class="admin fleft"><img src="images/person.png"/><a href="JavaScript:" class="xiala"> admin <img
                src="images/sanjx.png"/></a></div>

    </header>
    <!--头部-->

    <!--中间-->
    <div class="middle">
        <div class="middle-left fleft">
            <ul>
                <li>快捷导出</li>
                <li><a href="entry.html">入职列表</a></li>
                <li><a href="pay.html">薪酬信息</a></li>
                <li><a href="education.html">学历学位</a></li>
                <li><a href="number.html">账号信息</a></li>
            </ul>
        </div>
        <div class="middle-right fright ulli">
            <div class="find">
                <ul>
                    <li :class="{'type-active':currentType=='1,3'}" @click="currentType='1,3'">全部</li>

                    <li v-for="status in fileStatus" :class="{'type-active':currentType==status.type}"
                        @click="currentType=status.type;">{{status.desc}}
                    </li>
                    <!--<li :class="{'type-active':currentType==1}" @click="employeeType='长期员工';currentType=1">长期员工</li>-->
                    <!--<li :class="{'type-active':currentType==2}" @click="employeeType='实习生';currentType=2">实习生</li>-->
                    <!--<li :class="{'type-active':currentType==3}" @click="employeeType='短期人员';currentType=3">短期人员</li>-->
                    <li>回收站</li>
                    <li v-if="false">
                        <select v-model="selected">
                            <option value="#" v-for="yx in YX" :value="yx.text">{{yx.text}}</option>
                            <!--<option value="#">部门</option>-->
                            <!--<option value="#">学历</option>-->
                            <!--<option value="#">用工形式</option>-->
                            <!--<option value="#">职位</option>-->
                        </select>
                    </li>
                    <li  v-if="false">
                        <select v-model="second">
                            <option v-for="zy in selection" :value="zy.text" :selected="$.index == 0 ? true : false">
                                {{zy.text}}
                            </option>
                            <!--<option value="#">综合部</option>-->
                            <!--<option value="#">网络部</option>-->
                            <!--<option value="#">市场部</option>-->
                            <!--<option value="#">技术部</option>-->
                        </select>
                    </li>

                    <li><input class="search-keyword" placeholder="搜索">
                        <button type="button">搜索</button>
                    </li>
                </ul>
            </div>
            <div class="entry">
                <div class="entry-body">
                    <table>
                        <tbody>
                        <tr valign="top">
                            <td>编号</td>
                            <td>姓名</td>
                            <td>性别</td>
                            <td>部门</td>
                            <td>手机</td>
                            <td>Email</td>
                            <td>学历</td>
                            <td>加入时间</td>
                            <td>籍贯</td>
                            <td>操作</td>
                        </tr>
                        <tr valign="top" v-for="emp in emps">
                            <td>{{emp.employeeId}}</td>
                            <td>{{emp.employeeName}}</td>
                            <td>{{emp.employeeGender}}</td>
                            <td>{{emp.department}}</td>
                            <td>{{emp.mobilePhone}}</td>
                            <td>{{emp.email}}</td>
                            <td>{{emp.education}}</td>
                            <td>{{emp.entryTime}}</td>
                            <td>{{emp.nativePlace}}</td>
                            <td><a href="#" class="bj" @click="inputFished(emp)">{{emp.type == 1 ? '确认录入完成' : '录入完成'}}</a> <a href="#" class="opoen" @click="detailShow=true">详细档案</a>
                                <a href="#" class="sc">删除</a></td>
                        </tr>
                        </tbody>
                    </table>
                </div>

            </div>
            <div class="paglist ulli">
                <ul>
                    <li><a href="#"><<</a></li>
                    <li><a href="#"><</a></li>
                    <li><a href="#">1</a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">></a></li>
                    <li><a href="#">>></a></li>
                </ul>
            </div>
            <div class="foot">Copyright © 中移（成都）产业研究院</div>
        </div>
    </div>
    <!--中间-->

    <!--蒙层-->
    <div class="mengceng" v-if="detailShow">
        <div class="all-table">
            <div class="table-title"><strong>■</strong> 详细档案——张小明 <a href="JavaScript:" class="edit_opoen" @click="detailShow=false;detailEditShow=true">编辑</a> <span
                    class="close"><a href="JavaScript:"  @click="detailShow=false">✖</a></span></div>
            <div class="table-body" style="width: 100%;height: 100%;overflow-y: scroll;">
                <table >
                    <tbody>
                    <tr valign="top">
                        <td>部门</td>
                        <td>综合部</td>
                        <td>员工编号</td>
                        <td>032600001</td>
                    </tr>
                    <tr valign="top">
                        <td>姓名</td>
                        <td>张小明</td>
                        <td>性别</td>
                        <td>男</td>
                    </tr>
                    <tr valign="top">
                        <td>身份证号</td>
                        <td>72189287677321008382891783</td>
                        <td>出生日期</td>
                        <td>1992年03月14日</td>
                    </tr>
                    <tr valign="top">
                        <td>加入本单位时间</td>
                        <td>2019年02月28日</td>
                        <td>员工类型</td>
                        <td>移动通信企业人员</td>
                    </tr>
                    <tr valign="top">
                        <td>用工性质</td>
                        <td>劳动合同制</td>
                        <td>来源</td>
                        <td>本科生毕业</td>
                    </tr>
                    <tr valign="top">
                        <td>分配状态</td>
                        <td>已分配</td>
                        <td>员工类别</td>
                        <td>移动通信企业人员</td>
                    </tr>
                    <tr valign="top">
                        <td>人员组</td>
                        <td>股份制.工程人员</td>
                        <td>户口类别</td>
                        <td>本地农业户口</td>
                    </tr>
                    <tr valign="top">
                        <td>国籍</td>
                        <td>中国</td>
                        <td>名族</td>
                        <td>汉</td>
                    </tr>
                    <tr valign="top">
                        <td>籍贯</td>
                        <td>四川·成都</td>
                        <td>出生地</td>
                        <td>四川·成都</td>
                    </tr>
                    <tr valign="top">
                        <td>参加工作时间</td>
                        <td>2019年02月28日</td>
                        <td>参加移动时间</td>
                        <td>2019年02月28日</td>
                    </tr>
                    <tr valign="top">
                        <td>社会保险号</td>
                        <td>73917847120</td>
                        <td>婚姻状况</td>
                        <td>未婚</td>
                    </tr>
                    <tr valign="top">
                        <td>健康状况</td>
                        <td>健康</td>
                        <td>国家</td>
                        <td>中国</td>
                    </tr>
                    <tr valign="top">
                        <td>省</td>
                        <td>四川</td>
                        <td>直辖市</td>
                        <td>成都</td>
                    </tr>
                    <tr valign="top">
                        <td>地址行</td>
                        <td>天府广场01号</td>
                        <td>邮编</td>
                        <td>621110</td>
                    </tr>
                    <tr valign="top">
                        <td>移动电话</td>
                        <td>18029372873</td>
                        <td>家庭电话</td>
                        <td>15983734928</td>
                    </tr>
                    <tr valign="top">
                        <td>办公电话</td>
                        <td>028-8273627</td>
                        <td>Email邮箱</td>
                        <td>3243432233@qq.com</td>
                    </tr>
                    <tr valign="top">
                        <td>政治面貌</td>
                        <td>党员</td>
                        <td>加入时间</td>
                        <td>2019年03月02日</td>
                    </tr>
                    <tr valign="top">
                        <td>学历</td>
                        <td>本科</td>
                        <td>毕业情况</td>
                        <td>已毕业</td>
                    </tr>
                    <tr valign="top">
                        <td>最高学位标识</td>
                        <td></td>
                        <td>参加工作时学历标识</td>
                        <td></td>
                    </tr>
                    <tr valign="top">
                        <td>学位类别</td>
                        <td></td>
                        <td>学位</td>
                        <td></td>
                    </tr>
                    <tr valign="top">
                        <td>学位授予时间</td>
                        <td></td>
                        <td>入学时间</td>
                        <td></td>
                    </tr>
                    <tr valign="top">
                        <td>毕业时间</td>
                        <td></td>
                        <td>学制</td>
                        <td></td>
                    </tr>
                    <tr valign="top">
                        <td>毕业学校</td>
                        <td></td>
                        <td>所学专业</td>
                        <td></td>
                    </tr>
                    <tr valign="top">
                        <td>学习形式</td>
                        <td></td>
                        <td>所学专业分类</td>
                        <td></td>
                    </tr>
                    <tr valign="top">
                        <td>是否全职</td>
                        <td></td>
                        <td>职位编码</td>
                        <td></td>
                    </tr>
                    <tr valign="top">
                        <td>职位名称</td>
                        <td></td>
                        <td>职等</td>
                        <td></td>
                    </tr>
                    <tr valign="top">
                        <td>工资单</td>
                        <td></td>
                        <td>雇主</td>
                        <td></td>
                    </tr>
                    <tr valign="top">
                        <td>纳税地区</td>
                        <td></td>
                        <td>社会保险地区</td>
                        <td></td>
                    </tr>
                    <tr valign="top" >
                        <td colspan="4">
                            <br />
                            <br />
                            <br />
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <div class="edit" v-if="detailEditShow">
        <div class="all-table">
            <div class="table-title"><strong>■</strong> 详细档案——张小明 <span class="edit_close"><a
                    href="JavaScript:" @click="detailEditShow=false">✖</a></span></div>
            <div class="table-body" style="width: 100%;height: 100%;overflow-y: scroll;padding-bottom: ">
                    <table>
                        <tbody>
                        <tr valign="top">
                            <td>部门</td>
                            <td><input class="input" value="综合部"></td>
                            <td>员工编号</td>
                            <td><input class="input" value="032600001"></td>
                        </tr>
                        <tr valign="top">
                            <td>姓名</td>
                            <td><input class="input" value="张小明"></td>
                            <td>性别</td>
                            <td><input class="input" value="男"></td>
                        </tr>
                        <tr valign="top">
                            <td>身份证号</td>
                            <td><input class="input" value="72189287677321008382891783"></td>
                            <td>出生日期</td>
                            <td><input class="input" value="1992年03月14日"></td>
                        </tr>
                        <tr valign="top">
                            <td>加入本单位时间</td>
                            <td><input class="input" value="2019年02月28日"></td>
                            <td>员工类型</td>
                            <td><input class="input" value="移动通信企业人员"></td>
                        </tr>
                        <tr valign="top">
                            <td>用工性质</td>
                            <td><input class="input" value="劳动合同制"></td>
                            <td>来源</td>
                            <td><input class="input" value="本科生毕业"></td>
                        </tr>
                        <tr valign="top">
                            <td>分配状态</td>
                            <td><input class="input" value="已分配"></td>
                            <td>员工类别</td>
                            <td><input class="input" value="移动通信企业人员"></td>
                        </tr>
                        <tr valign="top">
                            <td>人员组</td>
                            <td><input class="input" value="股份制.工程人员"></td>
                            <td>户口类别</td>
                            <td><input class="input" value="本地农业户口"></td>
                        </tr>
                        <tr valign="top">
                            <td>国籍</td>
                            <td><input class="input" value="中国"></td>
                            <td>名族</td>
                            <td><input class="input" value="汉"></td>
                        </tr>
                        <tr valign="top">
                            <td>籍贯</td>
                            <td><input class="input" value="四川·成都"></td>
                            <td>出生地</td>
                            <td><input class="input" value="四川·成都"></td>
                        </tr>
                        <tr valign="top">
                            <td>参加工作时间</td>
                            <td><input class="input" value="2019年02月28日"></td>
                            <td>参加移动时间</td>
                            <td><input class="input" value="2019年02月28日"></td>
                        </tr>
                        <tr valign="top">
                            <td>社会保险号</td>
                            <td><input class="input" value="73917847120"></td>
                            <td>婚姻状况</td>
                            <td><input class="input" value="未婚"></td>
                        </tr>
                        <tr valign="top">
                            <td>健康状况</td>
                            <td><input class="input" value="健康"></td>
                            <td>国家</td>
                            <td><input class="input" value="中国"></td>
                        </tr>
                        <tr valign="top">
                            <td>省</td>
                            <td><input class="input" value="四川"></td>
                            <td>直辖市</td>
                            <td><input class="input" value="成都"></td>
                        </tr>
                        <tr valign="top">
                            <td>地址行</td>
                            <td><input class="input" value="天府广场01号"></td>
                            <td>邮编</td>
                            <td><input class="input" value="621110"></td>
                        </tr>
                        <tr valign="top">
                            <td>移动电话</td>
                            <td><input class="input" value="18029372873"></td>
                            <td>家庭电话</td>
                            <td><input class="input" value="15983734928"></td>
                        </tr>
                        <tr valign="top">
                            <td>办公电话</td>
                            <td><input class="input" value="028-8273627"></td>
                            <td>Email邮箱</td>
                            <td><input class="input" value="3243432233@qq.com"></td>
                        </tr>
                        <tr valign="top">
                            <td>政治面貌</td>
                            <td><input class="input" value="党员"></td>
                            <td>加入时间</td>
                            <td><input class="input" value="2019年03月02日"></td>
                        </tr>
                        <tr valign="top">
                            <td>学历</td>
                            <td><input class="input" value="本科"></td>
                            <td>毕业情况</td>
                            <td><input class="input" value="已毕业"></td>
                        </tr>
                        <tr valign="top">
                            <td>最高学位标识</td>
                            <td><input class="input" value="综合部"></td>
                            <td>参加工作时学历标识</td>
                            <td><input class="input" value="综合部"></td>
                        </tr>
                        <tr valign="top">
                            <td>学位类别</td>
                            <td><input class="input" value="综合部"></td>
                            <td>学位</td>
                            <td><input class="input" value="综合部"></td>
                        </tr>
                        <tr valign="top">
                            <td>学位授予时间</td>
                            <td><input class="input" value="综合部"></td>
                            <td>入学时间</td>
                            <td><input class="input" value="综合部"></td>
                        </tr>
                        <tr valign="top">
                            <td>毕业时间</td>
                            <td><input class="input" value="综合部"></td>
                            <td>学制</td>
                            <td><input class="input" value="综合部"></td>
                        </tr>
                        <tr valign="top">
                            <td>毕业学校</td>
                            <td><input class="input" value="综合部"></td>
                            <td>所学专业</td>
                            <td><input class="input" value="综合部"></td>
                        </tr>
                        <tr valign="top">
                            <td>学习形式</td>
                            <td><input class="input" value="综合部"></td>
                            <td>所学专业分类</td>
                            <td><input class="input" value="综合部"></td>
                        </tr>
                        <tr valign="top">
                            <td>是否全职</td>
                            <td><input class="input" value="综合部"></td>
                            <td>职位编码</td>
                            <td><input class="input" value="综合部"></td>
                        </tr>
                        <tr valign="top">
                            <td>职位名称</td>
                            <td><input class="input" value="综合部"></td>
                            <td>职等</td>
                            <td><input class="input" value="综合部"></td>
                        </tr>
                        <tr valign="top">
                            <td>工资单</td>
                            <td><input class="input" value="综合部"></td>
                            <td>雇主</td>
                            <td><input class="input" value="综合部"></td>
                        </tr>
                        <tr valign="top">
                            <td>纳税地区</td>
                            <td><input class="input" value="综合部"></td>
                            <td>社会保险地区</td>
                            <td><input class="input" value="综合部"></td>
                        </tr>
                        <tr valign="top" >
                            <td colspan="4">
                                <div class="add-button"><button type="button">确 定</button></div>
                            </td>
                        </tr>
                        <tr valign="top" >
                            <td colspan="4">
                                <br />
                                <br />
                                <br />
                            </td>
                        </tr>
                        </tbody>
                    </table>

            </div>
        </div>
    </div>

    <div class="erweima">
        <div class="index-ewm">
            <div class="table-title" style="border:none;"> 信息录入二维码地址 <span class="guanbi"><a
                    href="JavaScript:">✖</a></span>
            </div>
            <img src="images/ewm.png"/>
        </div>
    </div>

    <div class="admin-more">
        <ul>
            <li><a href="#">设置</a></li>
            <li><a href="#">退出</a></li>
        </ul>
    </div>
    <!--蒙层-->
</div>
<script>
    new Vue({
        el: '#app',
        data: {
            detailShow: false,
            detailEditShow: false,
            fileStatus: [{type: "1", "desc": "录入未完成"}, {type: "3", "desc": "录入完成"}],
            currentType: "1,3",
            modelShow: false,
            departments: [],
            employeeType: "",
            emp: {employeeId: ""},
            emps: [],
            selected: '部门',
            second: '综合部',
            YX: [{
                text: '部门',
                ZY: [{
                    text: '综合部'
                }, {
                    text: '网络部'
                }, {
                    text: "技术部"
                },]
            }, {
                text: '学历',
                ZY: [{
                    text: '高中'
                }, {
                    text: '专科'
                }, {
                    text: "本科"
                },]
            }, {
                text: '用工形式',
                ZY: [{
                    text: '派遣'
                }, {
                    text: '工商管理'
                }, {
                    text: "行政管理"
                },]
            }, {
                text: '职位',
                ZY: [{
                    text: '派遣'
                }, {
                    text: '工商管理'
                }, {
                    text: "行政管理"
                },]
            },]
        },
        created: function () {
            this.getEmps(null);
            this.getDepartments();
            this.getEmploymentNature();
        },
        methods: {
            getEmps: function (param) {
                let url = "/employee";
                if (param != null) {
                    url += "?types=" + param.currentType;
                }

                this.$http.get(url).then(function (res) {
                    this.emps = res.body;
                }, function () {
                    console.log('请求失败处理');
                });
                //发送get请求

            },
            getDepartments: function () {
                this.$http.get("/department").then(function (response) {
                    this.departments = response.body;
                });
            },
            getEmploymentNature() {
                this.$http.get("/employment_nature").then(function (response) {
                    this.employmentNature = response.body;
                });
            },
            inputFished(emp) {
                // 根据id 获取当前对象
                console.log(emp)
                emp.type = 3;
                this.$http.put("/employee/" + emp.id, emp).then(function (resp) {
                    alert(emp.employeeName + "信息录入完成");
                })
            }
        },
        computed: {
            changeCurrentEmployeeType() {
                return this.currentType;
            },
            changeSelection() {
                return this.selected;
            },
            selection: {
                get: function () {
                    var that = this;

                    return this.YX.filter(function (item) {
                        return item.text == that.selected;
                    })[0].ZY;
                }
            }
        },
        watch: {
            changeCurrentEmployeeType(val) {
                console.log(val)
                console.log(this.selected)
                console.log(this.second)
                this.getEmps({currentType: val});
                // let url = "/employee/" + this.emp.department;
                // let obj = $.ajax({url: url, async: false, dataType: "json"})
                // this.emp.employeeId = obj.responseJSON.employeeId;
            },
            changeSelection(val) {
                var that = this;
                this.second = this.YX.filter(function (item) {
                    return item.text == that.selected;
                })[0].ZY[0].text;
            }
        }
    });
</script>
</body>
</html>